<template>
  <div class="dashboard-container">
    <div class="dashboard-text" />
    <el-card class="box-card">
      <el-row type="flex" justify="space-between" style="margin-bottom:30px">
        <el-button type="primary" @click="addProperty">添加房产</el-button>
        <div class="search">
          <el-row type="flex">
            <!-- 下拉框 -->
            <el-select v-model="value2" placeholder="全部分类" style="margin-right:5px">
              <el-option value="全部分类" />
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="value1" placeholder="全部经纪" style="margin-right:5px">
              <el-option value="全部经纪" />
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!-- 搜索框 -->
            <el-input v-model="searchData.title_contains" placeholder="请输入关键字" />
            <!-- 查询按钮 -->
            <el-button type="primary" @click="search">筛选</el-button>
          </el-row>
        </div>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="50">
          <template v-slot="{$index}">
            {{ (pageIndex-1)*pageSize+$index+1 }}
            <!-- {{ $index + 1 }} -->
          </template>
        </el-table-column>
        <el-table-column
          prop="image"
          label="封面"
          width="180"
        >
          <template #default="{row}">
            <img :src="row.image" alt="" style="width:100%">
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="180"
        />
        <el-table-column
          prop="tags"
          label="标签"
        />
        <el-table-column
          prop="category"
          label="分类"
        >
          <template #default="{row}">
            <span>{{ row.category&&row.category.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180"
        />
        <el-table-column
          prop="agent"
          label="经纪"
          width="180"
        >
          <template #default="{row}">
            <span>{{ row.agent&&row.agent.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="150"
        />
        <el-table-column
          prop="desc"
          label="介绍"
          width="180"
        />
        <el-table-column
          prop="photos"
          label="照片"
          width="280"
        >
          <template #default="{row}">
            <!-- <span>{{ row }}</span> -->
            <span v-for="item in row.photos" :key="item.id">
              <img :src="item.url" alt="" style="width:70px;margin-right:5px">
            </span>
            <!-- <span v-for="item in row.photos" :key="item.id"><img :src="item" alt="" style="width:100px"></span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="{row}">
            <el-button type="danger" @click="delProperty(row.id)">删除</el-button>
            <el-button type="primary" @click="editorProperty(row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next,total"
          :page-size="pageSize"
          :total="total"
          :current-page="pageIndex"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <addProperty :show-dialog.sync="showDialog" :form-data="agentList" :echo-data="echoData" :form-data1="categoryList" :is-clearable="clear" @property="refresh" />
  </div>
</template>

<script>
import { categories } from '@/api/category'
import { delProperty, getAgent, getProperty, getPropertyDetail, propertyCount } from '@/api/property'
import addProperty from '@/views/property/components/addProperty.vue'
export default {
  components: {
    addProperty
  },
  data() {
    return {
      clear: false,
      userId: '',
      pageIndex: 1,
      pageSize: 2,
      page: {
        page: 1,
        size: 2
      },
      total: 0,
      showDialog: false,
      value1: '',
      value2: '',
      searchValue: '',
      searchData: {
        _limit: 2,
        _start: 0,
        title_contains: '',
        agent_contains: '',
        category_contains: ''
      },
      tableData: [{
        title: '',
        desc: '',
        image: '',
        agent: {},
        address: '',
        price: '',
        photos: {},
        tags: {},
        category: {}
      }],
      agentList: [],
      echoData: {},
      categoryList: []
    }
  },
  created() {
    this.getAgent()
    this.getProperty()
    this.propertyCount()
    this.categories()
  },
  methods: {
    // 获取分类数据
    async categories() {
      const { data } = await categories()
      this.categoryList = data
      console.log(190, data)
    },
    // 刷新
    refresh() {
      // console.log(164, 1)
      this.getProperty()
      this.propertyCount()
    },
    // 点击编辑按钮回显数据
    async editorProperty(id) {
      console.log(198)
      const { data } = await getPropertyDetail(id)
      console.log(203, data)
      // this.echoData = { ...data, agent: data.agent.name, category: data.category.title }
      this.echoData = data

      this.showDialog = true
    },
    //  删除房产
    async delProperty(id) {
      // console.log(155, id)
      await this.$confirm('确定删除')
      await delProperty(id)
      // console.log(157, this.tableData.length)
      if (this.tableData.length === 1 && this.pageIndex > 1) {
        this.pageIndex = this.pageIndex - 1

        // // 刷新页面
        // this.getProperty()
      }
      // 提示用户
      this.$message.success('删除成功')
      // 刷新页面
      // // 调用获取总数量接口
      const res = await propertyCount({ ...this.searchData, _start: Number((this.pageIndex - 1) * this.searchData._limit) })
      this.total = res.data
      // this.getProperty()
      const { data } = await getProperty({ ...this.searchData, _start: Number((this.pageIndex - 1) * this.searchData._limit) })
      this.tableData = data
    },
    // 实现翻页
    changePage(newPage) {
      console.log(230, this.searchData.agent_contains)
      this.pageIndex = newPage
      this.searchData._start = Number((newPage - 1) * this.searchData._limit)
      console.log(244, this.searchData)
      if (this.value1 !== '全部经纪') {
        console.log(this.value1)
        this.searchData.agent_contains = this.value1
      } else {
        this.searchData.agent_contains = ''
      }
      if (this.value2 !== '全部分类') {
        this.searchData.category_contains = this.value2
      } else {
        this.searchData.category_contains = ''
      }

      this.getProperty()
    },
    // 获取房产数量
    async propertyCount() {
      const { data } = await propertyCount(this.searchData)
      // console.log(160, data)
      this.total = data
    },
    // 搜索
    async search() {
      this.searchData.agent_contains = ''
      this.searchData.category_contains = ''
      // 条件：输入框有数据，并且两个下拉框没选东西
      if (this.searchData.title_contains !== '' && !this.value1 && !this.value2 || this.searchData.title_contains !== '' && (this.value1 === '全部经纪' || this.value2 === '全部分类')) {
        // this.searchData.agent_contains = ''
        // this.searchData.category_contains = ''
        this.pageIndex = 1
        const { data } = await getProperty({ ...this.searchData, _start: 0 })
        this.tableData = data
        // this.getProperty()
        this.propertyCount()
      } else if (this.value1 && this.value1 !== '全部经纪' && !this.value2) {
        // 条件：有经纪id，但不是全部经纪，并且没有选择分类
        this.pageIndex = 1
        const res = await propertyCount({ ...this.searchData, agent_contains: this.value1, _start: 0 })
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, agent_contains: this.value1, _start: 0 })
        this.tableData = data
      } else if ((this.value1 && this.value1 !== '全部经纪') && (this.value2 && this.value2 !== '全部分类')) {
        // 条件：有经纪id，但不是全部经纪，并且有分类id，但不是全部分类
        this.pageIndex = 1
        const res = await propertyCount({ ...this.searchData, agent_contains: this.value1, _start: 0, category_contains: this.value2 })
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, agent_contains: this.value1, _start: 0, category_contains: this.value2 })
        this.tableData = data
      } else if (this.value1 === '全部经纪' && this.value2 && this.value2 !== '全部分类') {
        // 条件：选了全部经纪，有分类id，但不是全部分类
        this.pageIndex = 1
        const res = await propertyCount({ ...this.searchData, _start: 0, category_contains: this.value2 })
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, _start: 0, category_contains: this.value2 })
        this.tableData = data
      } else if (this.value2 === '全部分类' && this.value1 && this.value1 !== '全部经纪') {
        // 条件：选了全部分类，有经纪id，但不是全部经纪
        this.pageIndex = 1
        const res = await propertyCount({ ...this.searchData, _start: 0, agent_contains: this.value1 })
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, _start: 0, agent_contains: this.value1 })
        this.tableData = data
      } else if (!this.value1 && this.value2 && this.value2 !== '全部分类') {
        // 条件：有分类id，但不是全部分类，没有选择经纪
        this.pageIndex = 1
        const res = await propertyCount({ ...this.searchData, category_contains: this.value2, _start: 0 })
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, category_contains: this.value2, _start: 0 })
        this.tableData = data
      } else if (this.searchData.title_contains === '' && (this.value1 === '全部经纪' || this.value2 === '全部分类')) {
        // 选了全部经纪，选了全部分类，输入框没有数据
        console.log(305)
        this.pageIndex = 1
        this.searchData.agent_contains = ''
        this.searchData.category_contains = ''
        const res = await propertyCount({ ...this.searchData, _start: 0 })
        console.log(302, this.searchData)
        this.total = res.data
        const { data } = await getProperty({ ...this.searchData, _start: 0 })
        this.tableData = data
        // this.getProperty()
        // this.propertyCount()
      } else {
        //  其他
        this.getProperty()
        this.propertyCount()
      }
    },
    //   获取全部经纪人
    async getAgent() {
      const { data } = await getAgent()
      this.agentList = data
    },

    // 获取房产数据
    async getProperty() {
      const { data } = await getProperty(this.searchData)
      this.tableData = data
      console.log(124, this.tableData)
    },

    // 点击添加获取弹窗
    addProperty() {
      this.showDialog = true
      this.clear = true
    }
  }
}

</script>

<style lang="scss" scoped>
::v-deep .dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
   img{
  object-fit: cover;
  display: inline-block;
  }

}
</style>
